<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @font-face {
            font-family: "Mona Sans";
            src: url("https://assets.codepen.io/64/Mona-Sans.woff2")
            format("woff2 supports variations"),
            url("https://assets.codepen.io/64/Mona-Sans.woff2")
            format("woff2-variations");
            font-weight: 100 1000;
        }


        @layer properties {
            @property --max-height {
                syntax:'<number>';
                inherits: true;
                initial-value: 0;
            }
            @property --bg-x {
                syntax:'<number>';
                inherits: true;
                initial-value: 50;
            }
            @property --bg-y {
                syntax:'<number>';
                inherits: true;
                initial-value: -200;
            }
            @property --scale {
                syntax:'<number>';
                inherits: true;
                initial-value: 1;
            }
            @property --accent-color-hue {
                syntax:'<number>';
                inherits: true;
                initial-value: 0;
            }
            @property --accent-color-hue {
                syntax:'<number>';
                inherits: true;
                initial-value: 0;
            }
            @property --item-y {
                syntax:'<number>';
                inherits: true;
                initial-value: 0;
            }
            @property --item-opacity {
                syntax:'<number>';
                inherits: true;
                initial-value: 0;
            }
            @property --accent-color {
                syntax:'<color>';
                inherits: true;
                initial-value: hsl(calc(var(--accent-color-hue)*1deg) 100% 58%);
            }
            @property --radial-bg-color {
                syntax:'<color>';
                inherits: true;
                initial-value: black;
            }
        }

        :root {
            --background-color: hsl(222deg 17% 14%);
            --dark-color: hsl(227deg 37% 3%);
            --light-color: hsl(211deg 23% 51%);
            --accent-color-hue: 219;
            --accent-color: hsl(calc(var(--accent-color-hue)*1deg) 100% 58%);
            --radial-bg-color: var(--dark-color);
            --max-height: 0;
            --bg-y: -50;
            --bg-x: 200;
            --item-y: 20;
            --item-opacity: 0;

            /* Misc */
            --_inner-radius: 10;
            --_inner-padding: 6;
            --inner-radius: calc(var(--_inner-radius) * 1px);
            --inner-padding: calc(var(--_inner-padding) * 1px);
            --outer-radius: calc(calc(var(--_inner-radius) + var(--_inner-padding)) * 1px);
            --debug: 0;
            --a11y: 0;
            --outline-color: hsla(calc(var(--accent-color-hue)*1deg) 100% 58% / calc(var(--a11y)*100%));
        }

        *,*:before,*:after {
            box-sizing: border-box;
            outline: calc(var(--debug)*1px) dotted red;
            outline-offset: -1px;
        }

        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }

        body {
            background: var(--background-color);
            font-family: "Mona sans", sans-serif;
        }

        main {
            max-width: 800px;
            margin: 16em auto;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            grid-gap: 32px;
            place-items: center;
            align-items: start;
        }

        @media (min-width: 760px) {
            main {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        header {
            color: white;

            & h3 {
                letter-spacing: .15em;
            }
        }

        div.select {
            color: white;
            background: var(--dark-color) radial-gradient(ellipse 70% 70% at calc(var(--bg-x)*1%) calc(var(--bg-y)*1%), var(--radial-bg-color) 0%, var(--dark-color) 100%);
            padding: var(--inner-padding);
            border-radius: var(--outer-radius);
            position: relative;
            width: 200px;
            z-index: 1;
            transition: background .3s ease, --bg-y .4 ease, --bg-x .4s ease;

            &:hover {
                animation: glow 1.2s ease-in-out;

                & > button:after {
                    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='98' fill='none'%3E%3Cpath fill='hsl(219deg 100% 58%)' d='M25.536 6c1.54-2.667 5.388-2.667 6.928 0l18.187 31.5c1.54 2.667-.385 6-3.465 6H10.814c-3.079 0-5.003-3.333-3.464-6L25.536 6ZM25.536 92c1.54 2.667 5.388 2.667 6.928 0l18.187-31.5c1.54-2.667-.385-6-3.465-6H10.814c-3.079 0-5.003 3.333-3.464 6L25.536 92Z'/%3E%3C/svg%3E")no-repeat center center / 0.6em;
                }
            }

            &:before {
                content: '';
                display: block;
                position: absolute;
                width: calc(100% - 2px);
                height: calc(100% - 2px);
                top: 1px;
                left: 1px;
                background: var(--dark-color);
                border-radius: var(--outer-radius);
                z-index: -1;
            }

            & > button {
                padding: calc(var(--inner-padding)*2) calc(var(--inner-padding)*2);
                background: var(--background-color);
                border-radius: var(--inner-radius);
                border: 0;
                color: white;
                text-align: left;
                font-size: 1em;
                width: 100%;
                cursor: pointer;
                position: relative;
                box-shadow: inset 0 2px 1px -1px rgb(255 255 255 / 10%);
                transform: scale(var(--scale));
                animation-duration: .2s;
                animation-timing-function: cubic-bezier(.66,-0.82,.33,1.73);

                &:focus {
                    outline: 1px solid var(--accent-color);
                    outline-offset: -1px;
                }


                &:after {
                    content: '';
                    position: absolute;
                    right: 8px;
                    height: 100%;
                    width: 1em;
                    top:0;
                    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='98' fill='none'%3E%3Cpath fill='hsl(211deg 23% 51%)' d='M25.536 6c1.54-2.667 5.388-2.667 6.928 0l18.187 31.5c1.54 2.667-.385 6-3.465 6H10.814c-3.079 0-5.003-3.333-3.464-6L25.536 6ZM25.536 92c1.54 2.667 5.388 2.667 6.928 0l18.187-31.5c1.54-2.667-.385-6-3.465-6H10.814c-3.079 0-5.003 3.333-3.464 6L25.536 92Z'/%3E%3C/svg%3E")no-repeat center center / 0.6em;
                }
            }

            & > div {
                display: flex;
                flex-direction: column;
                overflow: hidden;
                height: 0;
                /* transition: --max-height .2s ease; ?? not working ?? */
                transition: height .3s ease-in-out;

                & > a {
                    display: block;
                    padding: calc(var(--inner-padding)*1.6) calc(var(--inner-padding)*1.2);
                    color: var(--light-color);
                    cursor: pointer;
                    margin-top: 8px;
                    text-decoration: none;
                    border-radius: var(--inner-radius);
                    position: relative;

                    & > span {
                        position: relative;
                        display: block;
                        transform: translateY(calc(var(--item-y)*1px));
                        opacity: var(--item-opacity);

                        transition: --item-y .2s ease .1s, --item-opacity .2s .1s;
                    }

                    &:nth-child(1) span {
                        transition-delay: .1s;
                    }
                    &:nth-child(2) span {
                        transition-delay: .15s;
                    }
                    &:nth-child(3) span {
                        transition-delay: .2s;
                    }

                    &:focus {
                        outline: 1px solid var(--outline-color);
                        outline-offset: -1px;
                    }

                    &:hover,
                    &:focus{
                        color: var(--accent-color);
                    }
                }
            }

            /*
            * :focus-within or :has(button:focus) */

            &:focus-within {
                outline: 1px dashed var(--outline-color);
            }


            &:hover > div,
            &:has(button:focus) > div,
            &:focus-within > div {
                height: calc(var(--max-height)*1px);

                --item-y: 0;
                --item-opacity: 1;
            }
        }

        .select.nomotion {
            transition: none !important;
            animation: none !important;
            &:before,
            &:after,
            *, *:before, *:after {
                transition: none !important;
                animation: none !important;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .select {
                transition: none !important;
                animation: none !important;
                &:before,
                &:after,
                *, *:before, *:after {
                    transition: none !important;
                    animation: none !important;
                }
            }
        }

        @keyframes glow {
            from {
                --radial-bg-color: var(--accent-color);
                --bg-x: 100;
                --bg-y: 0;
            }
            50% {
                --radial-bg-color: hsl(290deg 100% 58%);
                --bg-x: 60;
                --bg-y: 120;
            }
            to {
                --radial-bg-color: var(--dark-color);
                --bg-x: 60;
                --bg-y: 120;
            }
        }

        @keyframes popOut {
            from {
                --scale: 1;
            }
            50% {
                --scale: 1.02;
            }
            to {
                --scale: 1;
            }
        }
    </style>
</head>
<body>
<main>
    <header>
        <h3>Default:</h3>
    </header>
    <header>
        <h3>Accessible:</h3>
    </header>
    <header>
        <h3>Motion-reduced:</h3>
    </header>
    <div class="select" tabindex="0" role="button">
        <button tabindex="0">Components</button>

        <div>
            <a role="button" tabindex="0" href="#"><span>Artboards</span></a>
            <a role="button" tabindex="0" href="#"><span>Pages</span></a>
            <a role="button" tabindex="0" href="#"><span>Templates</span></a>
        </div>
    </div>
    <div class="select" tabindex="0" role="button" style="--a11y: 1;--outline-color: hsla(calc(var(--accent-color-hue)*1deg) 100% 58% / calc(var(--a11y)*100%));">
        <button tabindex="0">Components</button>

        <div>
            <a role="button" tabindex="0" href="#"><span>Artboards</span></a>
            <a role="button" tabindex="0" href="#"><span>Pages</span></a>
            <a role="button" tabindex="0" href="#"><span>Templates</span></a>
        </div>
    </div>

    <div class="select nomotion" tabindex="0" role="button">
        <button tabindex="0">Components</button>

        <div>
            <a role="button" tabindex="0" href="#"><span>Artboards</span></a>
            <a role="button" tabindex="0" href="#"><span>Pages</span></a>
            <a role="button" tabindex="0" href="#"><span>Templates</span></a>
        </div>
    </div>
</main>
<script>
    const selects = document.querySelectorAll('.select');

    window.addEventListener('DOMContentLoaded', () => {
        selects.forEach(select => {
            const button = select.querySelector('button');
            const full_height = [];

            [...select.querySelectorAll('div > a')].map(link => {
                const styles = window.getComputedStyle(link);
                const box = link.getBoundingClientRect();
                const margin = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom) || 0;
                const height = box.height + margin;
                full_height.push(height);

                link.addEventListener('click', () => {
                    const link_text = link.textContent;
                    const button_text = button.textContent;
                    button.textContent = link_text;
                    button.style.animationName="popOut";
                    button.addEventListener("animationend", () => {
                        button.style.animationName="none"
                    });
                    const span = document.createElement('span');
                    span.textContent = button_text;
                    link.innerHTML = "";
                    link.appendChild(span)
                    link.blur()
                })
            });

            const totalHeight = full_height.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
            select.dataset.totalHeight = totalHeight;
            select.style.setProperty('--max-height', totalHeight);
        });
    });

</script>
</body>
</html>